<template>
	<!-- 通过传值来控制显示的背景色 -->
	<div class="navBar" :style="backColor">
		<div class="backBtn" @click="onClickLeft">
			<van-icon name="arrow-left" class="icon" />
			<div class="right">
				<div class="childLeft">
					<div class="text">
						<slot name="head"></slot>
					</div>
					<div class="timeLimit">
						<slot name="subhead"></slot>
					</div>
				</div>
				<div class="childRight">
					<image src="../../static/images/Shop/usage.png" mode=""></image>
					<text>联系客服</text>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	const props = defineProps({
		text: String
	})
	const onClickLeft = () => history.back();
	const backColor = computed(() => {
		if (props.text == "待付款") {
			return 'background: linear-gradient(to right, rgba(6, 255, 221, 1), rgba(78, 71, 255, 1));'
		} else if (props.text == '交易关闭') {
			return 'background: rgba(70,70,74,1);'
		} else if (props.text == '已发货' || props.text == '等待发货') {
			return 'background: rgba(78, 71, 255, 1);'
		}
	})
</script>

<style lang="scss" scoped>
	.navBar {
		width: 100%;
		// height: 80px;
		// max-height: 80px;

		color: white;

		.backBtn {
			width: 91%;
			display: flex;
			flex-direction: column;
			// margin: 0 auto;
			padding: 38px 30px 70px 33px;

			// align-items: center;
			.right {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.childRight {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					image {
						width: 41px;
						height: 44px;
					}
				}
			}

			.text {
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				font-size: 48px;
				color: white;
				display: flex;
				align-items: center;
			}

			.timeLimit {
				display: flex;
				align-items: center;
				font-size: 24px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.5);
				margin-left: 64px;
				--van-count-down-text-color: #626264;
				--van-count-down-font-size: 24px;

				::v-deep.timeDown {
					margin: 0 10px;
				}
			}
		}

		.icon {
			padding: 32px 0;
			font-size: 30px;
		}
	}
</style>